<template>
  <el-select
    :value="selectValue"
    @input="inputHandle"
    @change="changHandle"
    placeholder="请选择"
    v-bind="selectProps"
  >
    <el-option
      v-for="item in userList"
      :key="item[valueField]"
      :label="item.userName"
      :value="item[valueField]"
    >
    </el-option>
  </el-select>
</template>

<script>
import { getStoreEnableUser } from '@/api/after-sale/personnel/index'
export default {
  props: {
    value: {
      type: [Number, String],
      default: '',
    },
    valueField: {
      type: String,
      default: 'id',
    },
    storeId: {
      type: [String, Number],
      default: '',
    },
    selectProps: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      selectValue: '',
      userList: [],
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selectValue = val
      },
      deep: true,
      immediate: true,
    },
    storeId(val) {
      this.requestUserList(val)
    },
  },
  methods: {
    inputHandle(val) {
      this.selectValue = val
      this.$emit('input', val)
    },
    changHandle(val) {
      const item = val
        ? this.userList.find((item) => item[this.valueField] === val)
        : null
      this.$emit('change', item)
    },
    requestUserList(storeId) {
      if (!storeId) {
        return
      }
      getStoreEnableUser(storeId).then((res) => {
        this.userList = res.data
      })
    },
  },
  mounted() {
    this.requestUserList(this.storeId)
  },
}
</script>

<style>
</style>